<template>
	<view class="page container">
		<view class="h-28"> </view>
		<navigator url="/pages/addressList/index" hover-class="none" class="flex-between-center pad-32 bgc-fff mar-32 "
			style="border-radius: 24rpx;">
			<view class="" v-if="addrInfo.realname">
				<view class="user fs-32 c-333">
					<text>{{addrInfo.realname}}</text> <text class="ml-12">{{addrInfo.phone}}</text> <text  class="default" style="background: #F83D3D;color: #fff;" v-if="addrInfo.is_default==1">默认</text>
				</view>
				<view class="fs-28 c-666 mt-10">
					{{addrInfo.province}}{{addrInfo.city}}{{addrInfo.region}}{{addrInfo.addr}}
				</view>
			</view>
			<view class="" v-else>
					请先添加收货地址
			</view>
			<u-icon color="#d4d4d4" name="arrow-right"></u-icon>
		</navigator>
		<view class="pad-32 bgc-fff mar-32 goodsInfo" style="border-radius: 24rpx;">
			<view class="flex-between-center">
				<image :src="$config.domain+ goodsMain.images" mode="aspectFit"></image>
				<view class="ml-12" style="flex: 1;">
					<u-text :lines="1" size="32rpx" color="#121212" 
						:text="goodsMain.title || '王老吉瓶装300*12'"></u-text>
						
					<view class="fs-20 mt-15 mb-8" style="color: #999;">
						{{goodsMain.spec}}
					</view>	
					
					<view class="flex-between-center">
						
						<text class="fs-24  mr-8" >{{goodsMain.point}}积分+¥{{goodsMain.amount}}</text>
						<text class="fs-24">×1</text>	
					</view>
				</view>
			</view>
			
			<view class="flex-between-center fs-28 mt-30 " style="color: #71757B;">
				配送服务 <text class="fs-28" style="color: #121212;">快递 免邮</text>
			</view>
			<!-- <view class="flex-between-center fs-28 mt-30" style="color: #71757B;">
				订单备注 <text class="fs-28" >无备注</text>
			</view> -->
			<view class="flex-between-center fs-28 mt-30" style="color: #71757B;">
				收货信息 <text class="fs-28" style="color: #121212;">{{addrInfo.realname}}</text>
			</view>

		</view>


		


		<view class="bottom-box bgc-fff flex-row-center">
			<view class=" flex-center-center " style="margin-left:32rpx">
				<!-- 		  <view class="flex-column-center flex-column mr-40">
		  	<image src="/static/newVer/collect.png" mode="widthFix" style="width: 48rpx;"></image>
		  	收藏
		  </view>
		<view class="flex-column-center flex-column">
			<image src="/static/newVer/shop.png" mode="widthFix" style="width: 48rpx;"></image>
			购物车
		</view> -->
			合计： <text class="fs-36" style="color:  #F83D3D;">{{goodsMain.point}}积分+¥{{goodsMain.amount}}</text>
			</view>
			
			<u-button :customStyle="btnStyle" @click="toResult">立即兑换</u-button>
		</view>
	</view>
</template>
<script>
	import GoodsCard from "@/components/rowCards/GoodsCard";
	import NewsCard from "@/components/rowCards/NewsCard";
	import {
		getProductDetails,
		goods_collectApi,
		addrList,
		exchange
	} from "@/services/home";
	export default {
		data() {
			return {
				btnStyle: {
					border: "none",
				width: '256rpx',
				height: '98rpx',
				background: '#CC0000',
					color: "#fff",
					
					opacity: 1,
					

				},
				swiperList: [],
				goods_id: '',
				goods_info: {},
				sku_list: [],
				is_collect: 0,
				shop_info: {},
				goodsMain: {},
				addrInfo: {}
			};
		},
		components: {
			GoodsCard,
			NewsCard
		},
		onLoad(options) {
			this.goods_id = options.id;
			this.getAddress()
			this.getProductDetail();
		},
		mounted() {
			let vm =this
			uni.$on('choseAdd',function(data){
				if(data){
						vm.addrInfo = data
				}
			})
		},
		onUnload() {
			uni.$off('choseAdd')
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getAddress() {
				addrList({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					console.log(res)
					if (res.data && res.data.length) {
						this.addrInfo = res.data.find(item => item.is_default == 1)
						console.log(this.addrInfo)
					}
				})
			},
			async changeCollect() {
				await goods_collectApi({
					goods_id: this.goods_id,
				});
				this.is_collect = this.is_collect == 1 ? 0 : 1;
			},
			toResult() {	
				if(!this.addrInfo.realname) return uni.showToast({
					title:'请添加或选择收货地址',
					icon:'none'
				})
				exchange({
					 addr:this.addrInfo.addr,
					 city:this.addrInfo.city,
					 id:Number(this.goods_id),
					 phone:this.addrInfo.phone,
					 province:this.addrInfo.province,
					 realname:this.addrInfo.realname,
					 region:this.addrInfo.region,
					 userId:uni.getStorageSync('userId'),
					 
				}).then(res=>{
					if(res.code==1){
						uni.requestPayment({
							provider:"wxpay",
							...res.data.config,
							success:function(res){
								console.log(res)
								uni.showToast({
									title:'支付成功',
									icon:'none'
								})
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/scoreOrder/index'
									})
								},1000)
							},
							fail:function(err){
								console.log(err)
								uni.showToast({
									title:'用户取消支付',
									icon:'none'
								})
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/scoreOrder/index'
									})
								},1000)
								
							},
							
							
						})
					}
					console.log(res)
				})
			},
			getProductDetail() {
				getProductDetails({
					id: this.goods_id
				}).then((res) => {
					this.goodsMain = res.data
					this.swiperList = [this.$config.domain + res.data.images]
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page {
		padding-bottom: 200rpx;
		background-color: #f2f2f2;
	}

	.tabs {
		display: flex;
		flex-wrap: wrap;

		.tab-item {
			min-width: 96rpx;
			height: 48rpx;
			background-color: #f7f8fa;
			border-radius: 8rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 22rpx;
			margin-bottom: 22rpx;

			&-active {
				background-color: rgba(197, 38, 29, 0.1);
				color: #fff;
			}
		}
	}

	.bottom-box {
		// padding: 24rpx 32rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 98rpx; ///兼容 IOS<11.2/
		height:98rpx ; ///兼容 IOS>11.2/
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.imgbg {
		position: relative;

		.priceData {
			position: absolute;

			z-index: 99;
			color: #fff;
			top: 10rpx;
			left: 20rpx;
		}
	}

	.titleBox {
		position: relative;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: -60rpx;

	}

	.backbtn {
		position: fixed;
		top: 100rpx;
		z-index: 99;
		left: 40rpx;

	}

	.goodsInfo {
		image {
			width: 160rpx;
			height: 160rpx;
		}
	}
	.default{
		    background: #F83D3D;
		    color: #fff;
		    font-size: 24rpx;
		    padding: 2rpx 10rpx;
		    line-height: 24rpx;
		    border-radius: 6rpx;
			margin-left: 10rpx;
	}
</style>